<template>
<div>
 
  <div class="video">
  
     <VueMovieHeader   msg="影院列表"/>
      <baidu-map :center='`${ww}`'  class="bm-view">
  </baidu-map>
 <div v-if="laoding">
      <MusicLaoding />
    </div>
  
   
    <ul  v-else class="imgList" >
      <img-item
       v-for="mv in mvs"
       :key='mv.id'
       :song="mv"
        path="/mv"
      ></img-item>        
    </ul>
   
    
  </div>
   <VueMovieTabBar :active="1" />
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";


import { GETVIDEOAPI } from "@/api/api.js";

import ImgItem from "@/components/video/ImgItem.vue";
import VueMovieTabBar from "@/components/common/tab_bar.vue";
import VueMovieHeader from "@/components/common/header.vue";
import MusicLaoding from "@/components/common/laoding.vue";

export default {
  name: "Video",
  data() {
    return {
   center: '',
  laoding: true,
ww:this.$store.state.count,
      mvs: [],
    };
  },
   props: {
    
  },
  computed: {
    ...mapState(["cityId"]),
    autofn () {
		return this.$store.state.count
	},},
  watch: {
autofn () {
		this.ww = this.$store.state.count
	}
},
  methods: {
    getCity() {
      const getLocation = new BMap.Geolocation();
      var _this = this;
      getLocation.getCurrentPosition((position) => {
        // position中存放所有的定位数据
        // console.log(position);
        // 这里获取的是城市和省
        let city = position.address.city;
        let province = position.address.province;
        _this.locationMsg = city;
        this.laoding=false
     
       this.center=_this.locationMsg
      }, () => {
        _this.locationMsg = '定位失败!';
      }, {provider: 'baidu'});
    },
  },
    mounted() {
   this.getCity()
    GETVIDEOAPI({keyword:'电影', ci: this.cityId, offset:0,limit:20}).then((res) => {
      this.mvs = res.data;
     
    });
   
  
  },
  components: {
   
    ImgItem,
   VueMovieTabBar,
    VueMovieHeader,
    MusicLaoding,
    
 
  },
   
 
};
</script>
<style scoped lang="less">
.video {
 

  padding: 50px 0;
}
.imgList {
    background:white; 
   
}
.bm-view {
  width: 100%;
  height: 140px;
}



</style>